import { SearchOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Divider, Flex, Input, Switch, Typography } from "antd"
import { lowerCase } from "lodash"
import { useState } from "react"

import en_US from "./en-US"
import zh_CN from "./zh-CN"

const Template = () => {
	const { Title, Paragraph } = Typography
	const [text, setText] = useState("")
	const [en, setEn] = useState(false)
	const [resultArr, setResultArr] = useState<string[]>([])
	const search = () => {
		const target = en ? en_US : zh_CN
		const matchKeys = Object.keys(target).filter(key => lowerCase(target[key]).includes(lowerCase(text)))
		setResultArr(
			matchKeys.map(key => {
				return `${key}: ${target[key]}\t\t => \t\t${key}: ${en ? zh_CN[key] : en_US[key]}`
			})
		)
	}
	return (
		<Typography>
			<Title level={2}>搜索已有的text</Title>
			<Paragraph>
				<Flex gap={16} align="center">
					<Input
						prefix={<SearchOutlined />}
						value={text}
						onChange={e => setText(e.target.value)}
						onPressEnter={search}
						allowClear
						placeholder="Enter搜索"
						style={{ width: "60%" }}
					/>
					<Flex>
						<div>Search English Text?</div>
						<Switch value={en} onChange={setEn} />
					</Flex>
				</Flex>
				<Divider />
				<Flex gap={8} vertical>
					{resultArr.map(item => (
						<div key={item}>{item}</div>
					))}
				</Flex>
			</Paragraph>
		</Typography>
	)
}

export default {
	title: "locale已有文本搜索",
	component: Template
}

type Story = StoryObj<typeof Template>

export const CnSearch: Story = {}
